import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WebViewMaskView extends StatefulWidget {
  final String url;
  final VoidCallback onDismiss;

  const WebViewMaskView({
    Key? key,
    required this.url,
    required this.onDismiss,
  }) : super(key: key);

  @override
  _WebViewMaskViewState createState() => _WebViewMaskViewState();
}

class _WebViewMaskViewState extends State<WebViewMaskView> {
  late WebViewController _controller;

  @override
  void initState() {
    super.initState();
    // 初始化 WebView 控制器
    _controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)  // 允许 JavaScript
      ..loadRequest(Uri.parse(widget.url));  // 加载传入的 URL
  }

 @override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.transparent, // 半透明背景
    body: Center(
      child: GestureDetector(
        onTap: () {
          widget.onDismiss();  // 点击空白区域，执行 dismiss 动作
        },
        child: Material(
          color: Colors.transparent,
          child: Center(
            child: Container(
              width: MediaQuery.of(context).size.width - 80,
              height: MediaQuery.of(context).size.height * 0.6, // 高度为屏幕的 60%
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(15),
              ),
              child: Padding(
                padding: const EdgeInsets.only(top: 9.0, right: 9, left: 9, bottom: 9), // WebViewWidget 距离父容器 9px
                child: Column(
                  children: [
                    // 顶部的关闭按钮（居右）
                    Align(
                      alignment: Alignment.topRight,
                      child: GestureDetector(
                        onTap: widget.onDismiss,
                        child: Padding(
                          padding: const EdgeInsets.only(right: 10.0), // 右边距 10px
                          child: Image.asset(
                            'assets/images/差.png',
                            width: 22,
                            height: 22,
                          ),
                        ),
                      ),
                    ),
                    // WebViewWidget
                    Expanded(
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(15), // 保持 WebViewWidget 圆角
                        child: WebViewWidget(controller: _controller), // 使用 WebViewWidget 渲染 WebView
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    ),
  );
}

}
